<template>
	<view>
		<view class="cu-bar bg-white search">
			<view class="search-form" style="border-radius: 20rpx;">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="只搜索我的朋友"
					confirm-type="search"></input>
			</view>
		</view>

		<view class="flex">
			<view style="height: 200rpx;  flex: 1;">
				<view class="anbackground" style="background: linear-gradient(135deg, #A1C7FE 0%, #7059FF 100%);">
					<image src="/static/renmai/friend.png"></image>
					<view class="whiteText">新的朋友</view>
				</view>
			</view>
			<view style="height: 200rpx;  flex: 1;">
				<view class="anbackground" style="background: linear-gradient(90deg, #C977B0 0%, #994278 100%);">
					<image src="/static/renmai/businesscard.png"></image>
					<view class="whiteText">我的名片</view>
				</view>
			</view>
			<view style="height: 200rpx;  flex: 1;">
				<view class="anbackground" style="background: linear-gradient(90deg, #FFB00A 0%, #FF9404 100%);">
					<image src="/static/renmai/groupPulse.png"></image>
					<view class="whiteText">我的群脉</view>
				</view>
			</view>
		</view>



		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-purple cur':''"
					v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>

		<view class="cu-list menu-avatar solid-bottom">
			<view class="cu-item" v-for="(item,index) in dataList">
				<view class="cu-avatar round lg"
					:style="{backgroundImage:'url('+item.headimg+')'}">
				</view>
				<view class="content flex-sub">
					<view>{{item.realname.substring(0,1)}}公子-{{item.realname}}</view>
					<view class="text-gray text-sm flex justify-between">
						{{item.touxian1}}
					</view>
				</view>
			</view>
			<!-- <view class="cu-item">
				<view class="cu-avatar round lg"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
				</view>
				<view class="content flex-sub">
					<view>林公子-林德龙</view>
					<view class="text-gray text-sm flex justify-between">
						深圳市微蜜蜂网络科技
					</view>
				</view>
			</view> -->
		</view>


	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				TabCur: 0,
				tabList: ['一度人脉(0)', '二度人脉(1234)', '三度人脉(1234)'],
				jibie:1,
				dataList:[]
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			getDataList(){
				app.post("ApiMingpian/mingpianlist",{jibie:this.jibie},(res)=>{
					console.log(res)
					if(res.status==1){
						this.dataList = res.data
					}else{
						app.alert("查找错误，请稍后在试")
					}
					// res.data[0].latitude=28.22778;
					// res.data[0].longitude= 112.93886;
					// this.positions = res.data
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			tabSelect(e) {
				this.jibie = parseInt(e.currentTarget.dataset.id) + 1;
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				// this.dataList=[]
				this.getDataList()
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
	
	.anbackground{
		margin-left: 20rpx;
		width: 224rpx;
		height: 178rpx;
		border-radius: 30rpx;
	}
	
	image{
		width: 72rpx;
		height: 72rpx;
		margin-top: 28rpx;
		margin-left: 76rpx;
	}
	
	.whiteText{
		margin-top: 20rpx;
		margin-left: 56rpx;
		color: white;
	}
</style>